<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>事件冒泡</title>
	</head>

	<body>
        <!-- 开始时由最具体的元素接收，然后逐级向上传播到到 DOM 最顶层节点。 -->
		<div class="father">
			<div class="son">son</div>
		</div>
		<script>
			// 常见事件对象的属性和方法
			// 阻止冒泡  dom 推荐的标准 stopPropagation()
			var son = document.querySelector('.son')
			son.addEventListener(
				'click',
				function (e) {
					console.log('son')
					e.stopPropagation() // stop 停止  Propagation 传播
					e.cancelBubble = true // 非标准 cancel 取消 bubble 泡泡
				},
				false
			)

			var father = document.querySelector('.father')
			father.addEventListener(
				'click',
				function () {
					console.log('father')
				},
				false
			)
			document.addEventListener('click', function () {
				console.log('document')
			})
            //只打印出son
		</script>
	</body>
</html>
